<template>
  <div class="top-user">
    <div class="top-user-top">
      <el-avatar
        :size="50"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      ></el-avatar>
    </div>
    <div class="top-user-bottom">
      <div class="top">
        <div class="user-name">用户名</div>
        <div class="user-time">12:20</div>
      </div>
      <div class="bottom">
        <div >捐款200圆</div>
        <div >
          <img :src="require('@/assets/hand1.png')" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const imgList = ref([
      "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=0&spn=0&di=84260&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1719063513%2C2559625643&os=3428769622%2C502085381&simid=3425131725%2C175063916&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg%26refer%3Dhttp%3A%2F%2Ffile02.16sucai.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1640654049%26t%3D56d488981595f9ef2f3bb6be5a0c37c5&fromurl=ippr_z2C%24qAzdH3FAzdH3F8mf7vwt_z%26e3Bv54AzdH3Fda89AzdH3FabAzdH3F900d9_z%26e3Bip4s&gsm=1&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDIsNSw3LDgsOQ%3D%3D",
      "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=2&spn=0&di=226050&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3666548066%2C2508071679&os=781744667%2C2836669055&simid=3666548066%2C2508071679&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg%26refer%3Dhttp%3A%2F%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1640654049%26t%3D95f850747c0c6969e4de90db5c1e59df&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3F15ogs5w1AzdH3Fcnmd9-dl8b8c&gsm=1&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDIsNSw3LDgsOQ%3D%3D",
    ]);
    const router = useRouter();
    const showNext = () => {
      router.push("/");
    };
    return {
      imgList,
      showNext,
    };
  },
};
</script>

<style scoped>
.top-user {
  /* height: 130px; */
  width: 270px;
  height: 50px;
  padding: 4px;
  /* border: 1px solid #726f6f; */
  background-color: rgb(85, 81, 81);
  border-radius: 5px;
  display: flex;
  font-weight: 700;
  align-items: center;
  margin: 12px;
}
.top-user-bottom{
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
  width:100%;
}
.top{
  display: flex;
  justify-content: space-between;
  width:100%;
}
.bottom{
  display: flex;
  justify-content: space-between;
  width:100%;
}
.user-time{
  color: rgb(48, 132, 187);
}
.user-name{
  color: rgb(235, 51, 51);
}
</style>
